<template>
  <div class="cardStyleModal">
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="912px"
      wrapClassName="project-overview-modal-container"
      @cancel="handleClose()"
      :zIndex="5000"
    >
      <div class="project-overview-modal-body">
        <div class="header">
          <div class="close-btn" @click="handleClose()"></div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //关闭
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.project-overview-modal-container {
  .ant-modal-content {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    .ant-modal-close {
      display: none;
    }
    .ant-modal-body {
      padding: 0 !important;
      .project-overview-modal-body {
        height: 690px;
        display: flex;
        flex-direction: column;
        background: url(~@/assets/img/portalEntry/project_modal.png);
        background-size: 100% 100%;
        .header {
          height: 36px;
          flex-shrink: 0;
          position: relative;
          .close-btn {
            position: absolute;
            right: 0;
            top: 7px;
            width: 24px;
            height: 24px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
